doctype html
head
    meta(charset='utf-8')
    title line-height 测试
    style.

        .percent {
            width: 50%;
            font-size: 16px;
            line-height: 120%;
        }

        .percent h1 {
            font-size: 32px;
        }

        .percent p {
            font-size: 16px;
        }

        .percent #footer {
            font-size: 12px
        }

        .value {
            width: 50%;
            font-size: 16px;
            line-height: 30px;
        }

        .value h1 {
            font-size: 32px;
        }

        .value p {
            font-size: 16px;
        }

        .value #footer {
            font-size: 12px
        }

        .normal {
            width: 50%;
            font-size: 40px;
            line-height: normal;
        }

        .normal h1 {
            font-size: 20px;
        }

        .normal p {
            font-size: 16px;
        }

        .normal #footer {
            font-size: 12px;
        }

        .coefficient {
            width: 50%;
            font-size: 40px;
            line-height: 1.5;
        }

        .coefficient h1 {
            font-size: 32px;
        }

        .coefficient p {
            font-size: 16px;
        }

        .coefficient #footer {
            font-size: 12px
        }

        .test {
            border: 2px solid grey;
            line-height: 3;
        }

        .test em {
            font-size: 30px;
        }

        .test input{
            font-size: 20px;
            line-height: 0;
        }
        .test span{
            font-size: 20px;
            line-height: 0;
        }

body
    a(href='../line-height.md') line-height 讲解
    .percent
        h2
            strong line-height 百分比
        h1 font-size 32px
        p font-size 16px 读过我前面有关自适应按钮文章的人可能会发现我使用了line-height代替了height，其原因在于：IE6，IE7下，类似inline-block属性的元素里如果有block属性的元素，如果该block haslayout，则该标签会冲破外部inline-block的显示而宽度100%显示，从使按钮自适应文字大小的效果失效，解决方法就是使用line-height代替height。
        #footer 12px
            a font-size

    .value
        h2
            strong line-height 固定值
        h1 font-size 32px
        p font-size 16px 读过我前面有关自适应按钮文章的人可能会发现我使用了line-height代替了height，其原因在于：IE6，IE7下，类似inline-block属性的元素里如果有block属性的元素，如果该block haslayout，则该标签会冲破外部inline-block的显示而宽度100%显示，从使按钮自适应文字大小的效果失效，解决方法就是使用line-height代替height。
        #footer 12px
            a font-size

    .normal
        h2
            strong line-height normal 约为1.2
        h1 font-size 20px
        p font-size 16px 读过我前面有关自适应按钮文章的人可能会发现我使用了line-height代替了height，其原因在于：IE6，IE7下，类似inline-block属性的元素里如果有block属性的元素，如果该block haslayout，则该标签会冲破外部inline-block的显示而宽度100%显示，从使按钮自适应文字大小的效果失效，解决方法就是使用line-height代替height。
        #footer 12px
            a font-size

    .coefficient
        h2
            strong line-height 1.5
        h1 font-size 32px
        p font-size 16px 读过我前面有关自适应按钮文章的人可能会发现我使用了line-height代替了height，其原因在于：IE6，IE7下，类似inline-block属性的元素里如果有block属性的元素，如果该block haslayout，则该标签会冲破外部inline-block的显示而宽度100%显示，从使按钮自适应文字大小的效果失效，解决方法就是使用line-height代替height。
        #footer 12px
            a font-size
    .test.
        test <em>for line-height</em>
    .test
        input(typ='text', value='测试line-height')
    .test
        .test
            span test
    .test
        .test
            input(value='test')
    br
    br
    br
    br

